<template>
    <div>
        <!-- <el-main> -->
            <!-- 类别查询 -->
            <div class="tags-container">
                <div class="tags-line">
                    <el-radio-group v-model="categoryRadio">
                        <!-- <el-radio-button :label="0">全部</el-radio-button> -->
                        <el-radio-button :label="item.classCategoryId" v-for="item in categoryList" :key="item.classCategoryId">{{item.classCategoryName}}</el-radio-button>
                        <span>更多></span>
                    </el-radio-group>
                </div>
            </div>
        <!-- </el-main> -->

        <div>
            <!-- 作品列表 -->
            <div class="style-list" v-loading="load">
                <div v-for="(o, index) in classList" :key="index"  class="card">
                    <router-link :to="'/workDetails' + o.id">
                        <img :src="require('../../../../server/public/images/class/' + o.img)" class="image">
                        <div class="cardbottom">
                                <span class="title text-h2">{{o.name}}</span><span class="text1">{{o.englishname}}</span>
                                <svg t="1675314594945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2965"><path d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z" fill="#ffffff" p-id="2966"></path></svg>
                        </div>
                    </router-link>
                </div>
            </div>
        
            <div class="no-class" v-if="sorry">
                <p>抱歉，没有找到相关结果，请尝试用其他条件筛选。</p>
            </div>
        </div>
    </div>
</template>
<script>

import { classcountry } from '@/api/class/classApi'

export default {
    name: 'WorkspaceJsonClassCountry',
    data() {
        return {
            load: true,
            classList: [], // 作品列表
            sorry: false, // 空查询状态开关 
            categoryRadio: 1,
            categoryList: [
                {
                    classCategoryId: 1,
                    classCategoryName: '意大利',
                },
                {
                    classCategoryId: 2,
                    classCategoryName: '法国',
                },
                {
                    classCategoryId: 3,
                    classCategoryName: '巴西',
                },
                {
                    classCategoryId: 4,
                    classCategoryName: '新西兰',
                },
                {
                    classCategoryId: 5,
                    classCategoryName: '乌克兰',
                },
            ],
        };
    },

    watch: {
        categoryRadio: { 
            immediate: true,     // 属性immediate为 true时，页面初始化时就会被调用一次
            deep: true,     //属性 deep，为 true时，开启深度监视
            handler(newVal, oldVal) {
                classcountry(newVal).then((res)=>{
                    console.log(res.data)
                    if(res.data.length == 0){
                        this.sorry = true
                    }else{
                        setTimeout(()=>{
                            this.sorry = false
                            this.load = false
                            this.classList = res.data
                        },300)
                    }
                }).catch(error => {
                    // 处理错误
                    console.log('请求失败！尝试重启服务器。')
                    this.sorry = true
                });
            },
        },
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style scoped>

</style>